<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<u-tabs :list="tabList" :is-scroll="false" :current="current" @change="change"></u-tabs>
		<view class="search">
			<u-search style="width: 100%;" v-model="queryParam.orderParams" @custom="search"
				@search="search"></u-search>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData">
			<view v-for="(item,index) in list" :key="item.id">
				<u-card class="task-list-item" :border="false" @click="comfig(item)" padding="20" margin="20rpx">
					<view slot="head" style="display: flex;align-items: center;justify-content: space-between;">
						<view style="display: flex;align-items: center;font-size: 30rpx;">{{item.orderNumber || ''}}</view>
						<view style="color: #999999;font-size: 22rpx;">{{item.orderDate || ''}}</view>
					</view>
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<!-- <view class="apply-text"><span>项目编号：</span>{{item.projectNumber || ''}}</view> -->
								<view class="apply-text"><span>客户名称：</span>{{ item.customerName || '' }}</view>
								<view class="apply-text"><span>地址：</span>{{item.address || ''}}</view>
								<view class="apply-text"><span>提货地址：</span>{{item.productWarehouse || ''}}</view>
								<view class="apply-text"><span>业主电话：</span>{{item.phone || ''}}</view>
								<view class="apply-text"><span>配送时间：</span>{{item.installerDate || ''}}</view>
								<view class="apply-text"><span>备注：</span>{{item.newRemark || ''}}</view>
							</u-col>
						</u-row>
					</view>
					<view class="apply-list-foot" slot="foot" style="text-align: right;color: #58ca93;">
						{{tabList[current].name}}
					</view>
				</u-card>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
	import ListMxin from './mixins/ListMxin';
	import {
		stringify
	} from '@/common/common';
	export default {
		mixins: [MescrollMixins, ListMxin],
		data() {
			return {
				queryParam: {
					orderParams: '', //搜索条件查询
					// orderNumber //单据查询
					installerStatus: 0, //状态 0-待接单 1-待配送 2-已配送
					status: '7,8,9',
					installerType:1,
				},

				tabList: [{
					name: '待接单'
				}, {
					name: '待配送'
				}, {
					name: '已配送',
				}],
				current: 0,
				show: false,
				list: [],
				url: {
					list: 'vehicleDispatchList'
				}
			}
		},
		created() {

		},
		methods: {
			comfig(item) {
				if(+item.installerStatus > 1) return 
				let that = this;
				uni.showModal({
					title: '提示',
					content: `确认${this.current == 0 ? '接受' :'完成'}此车辆派遣任务？`,
					success: (res)=>{
						if (res.confirm) {
							let param ={
								installerStatus: this.current + 1,
								id:item.installerId,
							}
							this.$u.api.updateInstallStatus(param).then(res=>{
								console.log(res);
								if(res.code == 200){
									this.$u.toast('操作成功！')
									setTimeout(()=>{
										this.change(this.current + 1)
									},1500)
								}
							})
						}
					}
				});
			},
			change(index) {
				this.current = index;
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},

			/**
			 * 组装参数
			 */
			getQueryParams() {
				let params = Object.assign({}, this.queryParam)
				return params
			},

			change(index) {
				this.list = []
				this.current = index;
				this.queryParam.installerStatus = index
				this.loadData({
					num: 1,
					size: 10
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 80px;
		height: 80px;
		margin-right: 8px;
	}

	.apply-list-foot {
		font-size: 28rpx;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 48px;
			height: 48px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}
</style>